import React from 'react';
import ReactDOM from 'react-dom';
import { scrollScreen } from 'rc-scroll-anim';
import './less/common.less';
import Nav1 from './Nav';
import Banner0 from './Banner0';
import Content1 from './Content1';
import Content3 from './Content3';
import Content4 from './Content4';
import Content5 from './Content5';
import Footer1 from './Footer';
import Content0 from './Content0';
import Point from './Point';
import Media from 'react-media';
import MobileNav from './MobileNav';

const props = [
  // nav_1_0 区域
  {
    style: {
      position: 'fixed',
      height: '64px',
    },
    dataSource: {
      block1: {
        logo:'https://os.alipayobjects.com/rmsportal/mlcYmsRilwraoAe.svg',
        menu1:'首页',
        menu2:'案例',
        menu3:'加入我们',
        menu4:'下载',
      },
    },
  },
  // banner_0_1 区域
  {
    style: {
      height: '100%',
    },
    dataSource: {
      block1: {
        top:'25%',
        logo:'https://zos.alipayobjects.com/rmsportal/HqnZZjBjWRbjyMr.png',
        title:'白日梦',
        content:'一个目标驱动的任务发布平台',
        button:'了解更多',
        bgImg:'https://zos.alipayobjects.com/rmsportal/gGlUMYGEIvjDOOw.jpg',
      },
    },
  },
  // content_1_10 区域
  {
    style: {
      height: '50%',
    },
    dataSource: {
      block1: {
        img:'https://zos.alipayobjects.com/rmsportal/tvQTfCupGUFKSfQ.png',
        title:'明晰的任务标价',
        content:'根据需求的树状图，跟踪任务状态，并且合理公平地给予每个任务的标价，尽量对接活儿的手艺人，钱给够，心里不委屈。',
      },
    },
  },
  // content_3_11 区域
  {
    style: {
      height: '100%',
    },
    dataSource: {
      block1: {
        video:'https://os.alipayobjects.com/rmsportal/EejaUGsyExkXyXr.mp4',
        title:'新颖的制度设计，全平台透明',
        content:'目标和子目标，通通可以云协作',
      },
    },
  },
  // content_4_12 区域
  {
    style: {
      height: '100%',
    },
    dataSource: {
      title: {
        title:'他们在这里完成了自己的梦想',
        content:'把握未来',
      },
      block1: {
        img:'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
        content:'ant design',
      },
      block2: {
        img:'https://os.alipayobjects.com/rmsportal/IwAqwmFOJJVHsBY.svg',
        content:'ant motion',
      },
      block3: {
        img:'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
        content:'ant design',
      },
      block4: {
        img:'https://os.alipayobjects.com/rmsportal/IwAqwmFOJJVHsBY.svg',
        content:'ant motion',
      },
      block5: {
        img:'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
        content:'ant design',
      },
      block6: {
        img:'https://os.alipayobjects.com/rmsportal/IwAqwmFOJJVHsBY.svg',
        content:'ant motion',
      },
      block7: {
        img:'https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg',
        content:'ant design',
      },
      block8: {
        img:'https://os.alipayobjects.com/rmsportal/IwAqwmFOJJVHsBY.svg',
        content:'ant motion',
      },
    },
  },
  // content_5_13 区域
  {
    style: {
      height: '100%',
    },
    dataSource: {
      title: {
        title:'让你的梦想可以量化',
        content:'资源量化',
      },
      img: {
        img:'https://zos.alipayobjects.com/rmsportal/VHGOVdYyBwuyqCx.png',
      },
      block1: {
        img:'https://zos.alipayobjects.com/rmsportal/NKBELAOuuKbofDD.png',
        title:'有钱出钱',
        content:'每个任务的资金可以不必要由你出，说明好你的回报，可以广播这个资金需求，让有识之士帮您出钱',
      },
      block2: {
        img:'https://zos.alipayobjects.com/rmsportal/xMSBjgxBhKfyMWX.png',
        title:'有力出力',
        content:'一个任务的发布，可以由您自己完成，也可以由别人替你完成，当然您必须给予回报',
      },
      block3: {
        img:'https://zos.alipayobjects.com/rmsportal/MNdlBNhmDBLuzqp.png',
        title:'出谋划策',
        content:'你可以帮助别人完成他的梦想：提供完成一个任务的方法，也可以提供一个任务的子任务，若是被任务发布者采纳，您可以获取报酬。',
      },
    },
  },
  // footer_1_14 区域
  {
    style: {
      height: '400px',
    },
    dataSource: {
      logo: {
        logo:'https://zos.alipayobjects.com/rmsportal/qqaimmXZVSwAhpL.svg',
        content:'A efficient motion design solutions',
      },
      block1: {
        title:'产品',
        content:'产品更新记录\nAPI文档\n快速入门\n参考指南',
        contentLink:'#\n#\n#\n#',
      },
      block2: {
        title:'关于',
        content:'FAQ\n联系我们',
        contentLink:'#\n#',
      },
      block3: {
        title:'资源',
        content:'Ant Design\nAnt Design Mobile\nAnt Cool\nAntD Library',
        contentLink:'#\n#\n#\n#',
      },
      block4: {
        title:'关注',
        content:'https://zos.alipayobjects.com/rmsportal/IiCDSwhqYwQHLeU.svg\nhttps://zos.alipayobjects.com/rmsportal/AXtqVjTullNabao.svg\nhttps://zos.alipayobjects.com/rmsportal/fhJykUTtceAhYFz.svg\nhttps://zos.alipayobjects.com/rmsportal/IDZTVybHbaKmoEA.svg',
        contentLink:'#\n#\n#\n#',
      },
      copyright: {
        content:'Copyright © 2016 The Project by <a href=\'#\'>Ant Motion</a>. All Rights Reserved',
      },
    },
  },
  // content_0_9 区域
  {
    style: {
      height: '50%',
    },
    dataSource: {
      block1: {
        img:'https://zos.alipayobjects.com/rmsportal/nLzbeGQLPyBJoli.png',
        title:'引导式需求定位',
        content:'采用思维导图的方式，投票决定任务是否精确，一步一步地，为客户完成最终目标。',
      },
    },
  },
];

export default class Home extends React.Component {
  componentDidMount() {
    // 点的位置居中
    const list = ReactDOM.findDOMNode(this.refs.list);
    const listHeight = list.getBoundingClientRect().height;
    list.style = `margin-top: -${listHeight / 2}px`;
    // 实现整屏滚动
    const docHeight = ReactDOM.findDOMNode(this).getBoundingClientRect().height;
    scrollScreen.init({ docHeight });

  }


  render() {
    const children = [
      <Banner0 key="banner_0_1" name="banner_0_1" {...props[1]} />,
      <Content0 key="content_0_9" name="content_0_9" {...props[7]} />,
      <Content1 key="content_1_10" name="content_1_10" {...props[2]} />,
      <Content3 key="content_3_11" name="content_3_11" {...props[3]} />,
      <Content4 key="content_4_12" name="content_4_12" {...props[4]} />,
      <Content5 key="content_5_13" name="content_5_13" {...props[5]} />,
      <Footer1 key="footer_1_14" name="footer_1_14" {...props[6]} />,
      <Point key="list" ref="list" data={['nav_1_0', 'banner_0_1', 'content_0_9', 'content_1_10', 'content_3_11', 'content_4_12', 'content_5_13', 'footer_1_14']} />,
    ];
    return (
      <div className="templates-wrapper">

        <Media query="(max-width: 959px)">
          {matches => matches ? (
            <MobileNav key="nav_1_0" name="nav_1_0" {...props[0]} />
          ) : (
            <div>
            <Nav1 key="nav_1_0" name="nav_1_0" {...props[0]} defaultSelectedKeys={"/"} />
            <br/><br/><br/>
            </div>
          )}
        </Media>
        {children}
      </div>
    );
  }
}
